<template>
  <div id="give">
    <!--搜索-->
    <div class="search-content">
      <el-input v-model="givenName" placeholder="赠送方昵称查询" style="width: 240px"
                prefix-icon="el-icon-search" clearable @change="inquiryList"/>
      <el-input v-model="receiveName" placeholder="接收方昵称查询" style="width: 240px"
                prefix-icon="el-icon-search" clearable
                @change="inquiryList"/>
      <el-input v-model="giftName" placeholder="礼物名称查询" style="width: 240px"
                prefix-icon="el-icon-search" clearable @change="inquiryList"/>
      <el-select v-model="giftType" clearable placeholder="礼物类型" @change="inquiryList" style="width: 240px">
        <el-option
          v-for="item in giftTypeList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker
        v-model="dateTimeRange"
        type="datetimerange"
        range-separator="至"
        clearable
        value-format="yyyy-MM-dd HH-mm-ss"
        @change="inquiryList"
        :picker-options="pickerOptions"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="inquiryList">查询</el-button>
    </div>
    <!--操作列表-->
    <div class="table">
      <el-table fit :data="tableData" style="width: 100%">
        <el-table-column label="赠送方昵称" prop="fromMember" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.fromMember" class="publicStyle" @click="viewGiven(scope.$index, scope.row)">{{scope.row.fromMember.name}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="接收方昵称" prop="toMember" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.toMember" class="publicStyle" @click="viewReceiver(scope.$index, scope.row)">{{scope.row.toMember.name}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="礼物名称" prop="gift" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.gift" class="publicStyle" @click="viewGift(scope.$index, scope.row)">{{scope.row.gift.zhCnName}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="礼物类型" align="center">
          <template slot-scope="scope">
            <p v-if="scope.row.gift.type==='real'">真实礼物</p>
            <p v-if="scope.row.gift.type==='fictitious'">虚拟礼物</p>
          </template>
        </el-table-column>
        <el-table-column label="赠送数量" prop="num" align="center"/>
        <el-table-column label="花费金币数" prop="goldNum" align="center"/>
        <el-table-column label="赠送时间" prop="time" width="170" align="center"/>
      </el-table>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10,20,30,40,50]"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!--赠送方、接收方详情蒙层-->
    <el-dialog id="give-dialog" title="用户详情" :visible.sync="giveDialogVisible" v-if="DetailData">
      <el-form label-position="right" label-width="120px" :model="DetailData">
        <div>
          <el-form-item label="用户名称：" v-if='DetailData.userName'>
            <div>{{DetailData.userName}}</div>
          </el-form-item>
          <el-form-item label="用户性别：">
            <div>{{DetailData.sex==='man'?'男':'女'}}</div>
          </el-form-item>
          <el-form-item label="用户头像：" v-if='DetailData.httpAvatar'>
            <img :src='DetailData.httpAvatar' width="60" height='60' alt='头像有误'/>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="用户昵称：" v-if='DetailData.name'>
            <div>{{DetailData.name}}</div>
          </el-form-item>
          <el-form-item label="是否在线：">
            <div v-if='DetailData.isOnLine'>在线</div>
            <div v-else>离线</div>
          </el-form-item>
          <el-form-item label="会员等级：">
            <el-tag size="small" v-if="DetailData.grade==='ordinary'" type="info">普通用户</el-tag>
            <el-tag size="small" v-if="DetailData.grade==='blueDiamond'">蓝钻VIP</el-tag>
            <el-tag size="small" v-if="DetailData.grade==='anCrown'" type="warning">皇冠VIP</el-tag>
          </el-form-item>
          <el-form-item label="VIP到期时间：">
            <div>{{DetailData.vipDate}}</div>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer"></span>
    </el-dialog>
    <!--礼物详情蒙层-->
    <el-dialog id="gift-dialog" title="礼物详情" :visible.sync="giftDialogVisible" v-if="giftDetailData">
      <el-form label-position="right" label-width="30%" :model="giftDetailData">
        <el-form-item label="礼物名称：" v-if='giftDetailData.zhCnName'>
          <div>{{giftDetailData.zhCnName}}</div>
        </el-form-item>
        <el-form-item label="礼物备注：" v-if='giftDetailData.zhCnInfo'>
          <div>{{giftDetailData.zhCnInfo}}</div>
        </el-form-item>
        <el-form-item label="礼物价格：" v-if='giftDetailData.price'>
          <div>{{giftDetailData.price}}</div>
        </el-form-item>
        <el-form-item label="礼物图像：" v-if='giftDetailData.httpPath'>
          <img :src='giftDetailData.httpPath' width="80" height='80' alt='头像有误'/>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {Message} from 'element-ui';
  import request from "../../utils/request";

  export default {
    name: "GiveList",
    data() {
      return {
        // 查询
        givenName: "",
        receiveName: '',
        giftName: '',
        giftType:null,
        dateTimeRange: [],
        pickerOptions: {
              shortcuts: [
                  {
                      text: '今天',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date(end.getFullYear(), end.getMonth(), end.getDate(), 0, 0, 0);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '昨天',
                      onClick(picker) {
                          const date = new Date();
                          date.setTime(date.getTime() - 3600 * 1000 * 24);
                          let start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
                          let end = new Date(new Date().getFullYear(), new Date().getMonth(), date.getDate(), 23, 59, 59);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '前天',
                      onClick(picker) {
                          const date = new Date();
                          date.setTime(date.getTime() - 3600 * 1000 * 24* 2);
                          let start = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
                          let end = new Date(new Date().getFullYear(), new Date().getMonth(), date.getDate(), 23, 59, 59);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '本月',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date(end.getFullYear(), end.getMonth(), 1, 0, 0, 0);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '上月',
                      onClick(picker) {
                          const date = new Date();
                          date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
                          let start = new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0);
                          let end = new Date(new Date().getFullYear(), new Date().getMonth(), 1, 23, 59, 59);
                          end.setTime(end.getTime() - 3600 * 24 * 1000);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '最近一周',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '最近一个月',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                          picker.$emit('pick', [start, end]);
                      }
                  },
                  {
                      text: '最近三个月',
                      onClick(picker) {
                          const end = new Date();
                          const start = new Date();
                          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                          picker.$emit('pick', [start, end]);
                      }
                  }
              ]
          },
        giftTypeList: [
          {
            value: "real",
            label: "真实礼物"
          },
          {
            value: "fictitious",
            label: "虚拟礼物"
          }
        ],
        isClearable: true,
        // 列表数据
        tableData: [],
        //赠送方、接收方详情
        giveDialogVisible: false,
        DetailData: {},
        //礼物详情
        giftDialogVisible: false,
        giftDetailData: {},
        //分页
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    },
    mounted() {
      this.inquiryList();
    },
    methods: {
      isNotNull(value) {
        return value !== null && value !== undefined && value !== "";
      },
      //查询列表
      inquiryList() {
        let that = this;
        that.tableData = [];
        let data = {
          pageNumber: that.currentPage,
          pageSize: that.pageSize,
          filters: []
        };
        if (that.isNotNull(that.givenName)) { //赠送方昵称
          data.filters.push({
            property: "fm.name",
            value: that.givenName,
            operator: "eq"
          })
        }
        if (that.isNotNull(that.receiveName)) { //接收方昵称
          data.filters.push({
            property: "tm.name",
            value: that.receiveName,
            operator: "eq"
          })
        }
        if (that.isNotNull(that.giftName)) { //礼物名称
          data.filters.push({
            property: "g.zh_cn_name",
            value: that.giftName,
            operator: "like"
          })
        }
        if (this.isNotNull(that.giftType)) { //上架状态
          data.filters.push({
            property: "g.type",
            value: that.giftType === "real" ? 0 : 1,
            operator: "eq"
          })
        }
        if (this.isNotNull(that.dateTimeRange)) { //赠送时间范围
          data.filters.push({
            property: "mg.time",
            value: that.dateTimeRange[0],
            operator: "ge"
          });
          data.filters.push({
            property: "mg.time",
            value: that.dateTimeRange[1],
            operator: "le"
          })
        }
        request({
          method: 'post',
          url: 'admin/gift/member/list',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
          data: data
        }).then(function (res) {
          if (res.code === 200) {
            that.total = res.data.total;
            let arr = res.data.records;
            if (arr.length === 0) {
              that.tableData = [];
            } else {
              that.tableData = arr
            }
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      //查看赠送方详情
      viewGiven(index, row) {
        this.giveDialogVisible = true;
        this.DetailData = row.fromMember;
      },
      //查看接收方详情
      viewReceiver(index, row) {
        this.giveDialogVisible = true;
        this.DetailData = row.toMember;
      },
      //查看礼物详情
      viewGift(index, row) {
        this.giftDialogVisible = true;
        this.giftDetailData = row.gift;
      },
      // 改变每页显示的数量
      handleSizeChange(val) {
        this.pageSize = val;
        this.inquiryList();
      },
      //改变当前页
      handleCurrentChange(val) {
        this.currentPage = val;
        this.inquiryList();
      }
    }
  }
</script>

<style src="../../assets/css/giftManagement/giveList.css">

</style>
